<template>
  <view class="contenter">
    <view class="form">
      <view class="u-flex">
        <view>
          <view class="form_item">
            <view class="lable">技师姓名</view>
            <view class="item_input input">
              <u-input v-model="form.name" placeholder="添加技师姓名" type="text" :border="false" :height="80" />
            </view>
          </view>
          <view class="form_item">
            <view class="lable">电话号码</view>
            <view class="item_input input">
              <u-input v-model="form.phone" placeholder="添加技师电话号码" type="text" :border="false" :height="80" />
            </view>
          </view>
        </view>
        <view class="user" @click="userImg">
          <view v-if="!form.timg">
            <view class="lv flex_j_c u-flex u-margin-bottom-20">
              <u-icon name="plus"  color="#45806E" size="46"></u-icon>
            </view>
            <view class="name">添加技师头像</view>
          </view>

          <view class="u-margin-bottom-20" v-else>
            <item-image  :img="form.timg" :width="160" :height="160"></item-image>
          </view>

        </view>
      </view>
      <view class="form_item">
        <view class="lable">身份证号</view>
        <view class=" input">
          <u-input v-model="form.id_num" placeholder="添加身份证号" type="text" :border="false" :height="80" />
        </view>
      </view>
      <view class="flex">
        <view class="form_item">
          <view class="lable">显示好评率</view>
          <view class=" input">
            <u-input v-model="form.praise"  placeholder="添加好评率" type="number" :border="false" :height="80" />
          </view>
        </view>
        <view class="form_item" style="margin-left: 40rpx" v-if="id">
          <view class="lable">实际好评率</view>
          <view class=" input u-flex">
            <view>{{form.reality_praise || 0}}%</view>
          </view>
        </view>
      </view>
      <view class="form_item" @click="TransferOrderShow = true">
        <view class="lable">角色选择</view>
        <view class=" input u-flex flex_bt">
          <view style="color: #9C9C9A">{{name}}</view>
          <u-icon name="arrow-right"  color="#9C9C9A" size="21"></u-icon>
        </view>
      </view>
      <view class="form_item">
        <view class="lable">技师简介</view>
        <view class=" input">
          <u-input  v-model="form.tintro" :height="200" placeholder="填写技师简介" type="textarea" :border="false"  />
        </view>
      </view>
      <view class="form_item">
        <view class="lable">技师作品</view>
<!--        <upload :multiple="true" :imgs="form.tworks"></upload>-->
        <view class="u-flex u-flex-wrap ">
          <view v-for="(data,index) in form.tworks" :key="index" class="u-margin-right-10 u-margin-top-20 imgs" @click="deleteImg(data,index)">
            <item-image  :img="data" :width="160" :height="160"></item-image>
            <view class="delete">
              <u-icon name="close"  color="#fff" size="20"></u-icon>
            </view>
          </view>
          <view class="lv flex_j_c u-flex u-margin-top-20"  @click="allImg">
            <u-icon name="plus"  color="#45806E" size="46"></u-icon>
          </view>
        </view>

      </view>
    </view>
    <view class="u-flex flex_bt u-margin-top-20">
      <view></view>
      <view class="u-flex " v-if="id">
        <view class="pai" @click="schedu">排班</view>
        <view class="jin" @click="show = true,form.status = 2">禁用</view>
      </view>
    </view>
    <view class="btDe" v-if="id" @click="Tecshow = true">刪除技师</view>
    <view class="bt " @click="changeAdd">{{add}}</view>
    <!--身份选择-->
    <u-picker mode="selector"  :range="selectorObj" v-model="TransferOrderShow" @confirm="confirm" range-key="name"></u-picker>
    <!--禁用弹框-->
    <modal-item v-if="show" :item="'是否禁用'" @submit="submit" @close="show = false" :titleShow="false" :cancel="true"></modal-item>
    <!--删除技师-->
    <modal-item v-if="Tecshow" :item="'是否删除技师'" @submit="deleteSubmit" @close="Tecshow = false" :titleShow="false" :cancel="true"></modal-item>
  </view>
</template>

<script>
import Upload from "../../components/upload";
import ModalItem from "../../components/item/modalItem";
export default {
  name: "addTec",
  components: {ModalItem, Upload},
  data(){
    return{
      form:{
        tworks:[],
        timg:'',
        tintro:'',
        id_num:'',
        status:1
      },
      add:'确认新增',
      imgIndex:-1,//目前作品图长度
      show:false,
      Tecshow:false,
      TransferOrderShow:false,
      selectorObj: [],//职称
      name: '选择角色',//职称名称
      id:'',//技师id
    }
  },
  onLoad(option) {
    this.form.store_id = uni.getStorageSync('store').id
    this.id = option.id
    if(this.id){
      this.add = '完成编辑'
      uni.setNavigationBarTitle({
        title:'修改技师'
      })
    }
    //请求详情
    this.tecDetails()
    //头像
    // uni.$on('uAvatarCropper', path => {
    //   console.log(path,'请求')
    //   uni.uploadFile({
    //     url: 'https://yft.yangfatang.cn/Uploads/imageUploads',
    //     filePath: path,
    //     name: 'image',
    //     success: (res) => {
    //       this.form.timg = JSON.parse(res.data).data
    //     }
    //   });
    // })
  },
  onUnload() {
    uni.$off('uAvatarCropper')
  },
  methods:{
    //删除图片
    deleteImg(img,index){
      this.form.tworks.splice(index, 1)
      this.imgIndex = this.form.tworks.length -1
    },
    //新增技师
    changeAdd(){
      if(this.add == '确认新增'){
        if(!this.form.name)return this.$u.toast('请输入技师姓名！')
        if(!this.form.phone)return this.$u.toast('请输入电话号码！')
        if(!this.form.timg)return this.$u.toast('请添加技师头像！')
        if(!this.form.praise)return this.$u.toast('请添加显示好评率！')
        // if(!this.form.reality_praise)return this.$u.toast('请添加实际好评率！')
        if(!this.form.technician_position_id)return this.$u.toast('请选择身份！')
        if(!this.form.tworks)return this.$u.toast('请添加作品！')
      }
      console.log(this.form)
      this.form.tworks = this.form.tworks.join('||')
      this.$api.rosterSave(this.form).then(res => {
        this.$u.toast('操作成功')
        uni.navigateBack({
          delta: 1
        })
      })
    },
    //获取技师详情
    tecDetails(){
      this.$api.tecDetails({id:this.id}).then(res => {
        //编辑的情况下
        if(this.id ) {
          this.form = res.data.technician
          let name = res.data.position.filter(data=>{
            if(data.id == res.data.technician.technician_position_id){
              return data.name
            }
          })
          this.name = name[0].name
          this.imgIndex = res.data.technician.tworks.length -1
        }
        this.selectorObj = res.data.position
      })
    },

    //技师排班
    schedu(){
      this.form.status = 1
      this.$u.route({
        url:'/pagesA/technicianManagement/Scheduling',
        params:{
          id: this.id || '',
          type:2
        }
      })
    },
    //删除技师
    deleteSubmit(){
      this.$api.tecDelete({id:this.id}).then(res => {
        this.$u.toast('删除成功！')
        setTimeout(() => {
          this.Tecshow = false
          uni.navigateBack({
            delta: 1
          })
        }, 1000)

      })

    },
    //禁用
    submit(){
      this.show = false
    },
    // 修改上传头像
    userImg(){
      var that = this
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album'], //从相册选择
        success: function (res) {
          const src = res.tempFilePaths[0];
          // uni.navigateTo({
          //   url:'/pages/u-avatar-cropper/u-avatar-cropper?src='+src
          // })

          uni.uploadFile({
            url: 'https://yft.yangfatang.cn/Uploads/imageUploads',
            filePath: src,
            name: 'image',
            success: (res) => {
              that.form.timg = JSON.parse(res.data).data
            }
          });
        }
      });
    },
    //修改作品
    allImg(){
      var that = this
      uni.chooseImage({
        count: 9, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album'], //从相册选择
        success: function (res) {
          res.tempFilePaths.map((img,index) => that.upload(img,index))
        }
      });
    },
    upload(img,index) {
      let that = this
      return new Promise((resolve, reject) => {
        uni.uploadFile({
          //参数可查看官方文档
          url: 'https://yft.yangfatang.cn/Uploads/imageUploads',
          filePath: img,
          name: 'image',
          success: (res) => {
            that.imgIndex = that.imgIndex +1
            that.form.tworks[that.imgIndex] = JSON.parse(res.data).data
            resolve(res)
          }
        })

      })
    },

    //选择身份
    confirm(e){
      this.form.technician_position_id = this.selectorObj[e].id
      this.name = this.selectorObj[e].name
    },
  }
}
</script>
<style lang="scss">
.u-upload{
  .u-add-wrap{
    background: #FFFFFF !important;
    border: 2rpx dashed #45806E;
    border-radius: 16rpx;
  }
  .u-add-tips{
    display: none;
  }
}
.u-list-item{
  background: #FFFFFF;
  border: 2rpx dashed #45806E;
  border-radius: 16rpx;
}
.uicon-plus{
  font-size: 46rpx !important;
  color: #45806E;
}
</style>
<style scoped lang="scss">
  .contenter{
    margin: 0 32rpx;
  }
  .form{
    .form_item{
      width: 100%;
      .lable{
        color: #4B4B4B;
        font-size: 28rpx;
        margin-top: 20rpx;
      }
      .item_input{
        width: 428rpx;
      }
      .input{
        min-height: 80rpx;
        background: #FFFFFF;
        border-radius: 4rpx;
        margin-top: 20rpx;
        padding:0 20rpx;
      }
    }
    .user{
      margin-left: 76rpx;
      margin-top: 90rpx;

    }
  }
  .lv{
    width: 160rpx;
    height: 160rpx;
    background: #FFFFFF;
    border: 2rpx dashed  #45806E;
    border-radius: 16rpx;
  }
  .bt{
    margin-top: 30rpx;
  }
  .btDe{
    width: 590rpx;
    height: 78rpx;
    background: #F2F2F2;
    border: 2rpx solid #E3E3E3;
    border-radius: 40rpx;
    text-align: center;
    line-height: 78rpx;
    margin: 0 auto;
    margin-top: 30rpx;
  }
  .pai{
    width: 120rpx;
    height: 62rpx;
    border: 2rpx solid #45806E;
    border-radius: 8rpx;
    font-size: 24rpx;
    font-weight: bold;
    text-align: center;
    line-height: 62rpx;
    color: #45806E;
  }
  .jin{
    width: 120rpx;
    height: 62rpx;
    border: 2rpx solid #E3E3E3;
    background: #f2f2f2;
    border-radius: 8rpx;
    color: #4B4B4B;
    font-size: 24rpx;
    font-weight: bold;
    text-align: center;
    line-height: 62rpx;
    margin-left: 20rpx;
  }
  .imgs{
    position: relative;
    text-align: center;
    line-height: 25rpx;
    &:nth-child(4n+0){
      margin-right: 0;
    }
    .delete{
      position: absolute;
      right: -8rpx;
      top: -14rpx;
      width: 30rpx;
      height: 30rpx;
      background: #FA6B60;
      border-radius: 50%;

    }
  }

</style>